<template>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <Header  :addTodo="addTodo"/>
      <List :todos="todos" :deleteTodo="deleteTodo"/>
      <Footer/>
    </div>
  </div>
</div>
</template>

<script>
  import Header from "./components/Header.vue"
  import List from "./components/List.vue"
  import Footer from "./components/Footer.vue"
  
  export default{
  	data () {
  		return {
//			todos: 
//			[{
//				title: "吃饭",
//				complete: false
//			},{
//				title: "睡觉",
//				complete: true
//			},{
//				title: "coding",
//				complete: false
//			}]
				// 从localStorage读取todos
				todos: JSON.parse(window.localStorage.getItem("todos_key") || "[]")
  		}
  	},
  	watch: { // 监视
  		todos: {
  			deep: true, // 深度监视
  			handler: function(value){
  				// 将todos最新的值, 保存到localStorage
  				window.localStorage.setItem("todos_key", JSON.stringify(value))
  			}
  		}
  	},
  	methods:{
  		addTodo(todo){
  			this.todos.unshift(todo)
  		},
  		deleteTodo(index){
  			this.todos.splice(index, 1)
  		}
  	},
  	components: {
  		Header,
  		List,
  		Footer
  	}
  }
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>